<template>
  <div class="feature-picker">
    <div class="feature-picker-left pickitem">
      <div class="feature-picker-wrapper">
        <div class="feature-picker-wrapper_text">
          <div class="feature-picker-wrapper_text_title">每日一鸟</div>
          <div class="feature-picker-wrapper_text_label">
            <span>白 枕 鹤 Grus vipio White-naped Crane</span>
          </div>
        </div>
        <div class="feature-picker-wrapper_icon">
          <img src="../../../assets/img/鸟.png" alt="" />
        </div>
      </div>
    </div>
    <div class="feature-picker-right pickitem" @click="routerTo('/rank')">
      <div class="feature-picker-wrapper">
        <div class="feature-picker-wrapper_text">
          <div class="feature-picker-wrapper_text_title">用户排行榜</div>
          <div class="feature-picker-wrapper_text_label">
            目前排名 <strong><b>1111111</b></strong>
          </div>
        </div>
        <div class="feature-picker-wrapper_icon">
          <img src="../../../assets/img/排名.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onBeforeMount, reactive, toRefs } from '@vue/runtime-core';
import { useRouter } from 'vue-router';
export default {
  setup() {
    const state = reactive({});
    const router = useRouter();
    onBeforeMount(() => {});
    const routerTo = (url) => {
      router.push({
        path: url,
      });
    };
    return {
      ...toRefs(state),
      routerTo,
    };
  },
};
</script>

<style lang="less" scoped>
.feature-picker {
  display: flex;
  box-sizing: border-box;
  margin: 10px;
  &-wrapper {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &_text {
      flex: 1;
      &_title {
        font-size: 16px;
        font-weight: 500;
        font-family: '黑体';
      }
      &_label {
        margin-top: 8px;
        font-size: 9px;
        color: rgb(148, 148, 148);
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
    &_icon {
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        height: 40px;
        width: 40px;
      }
    }
  }
  .pickitem {
    flex: 1;
    height: 64px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px #eeeeee, -5px -5px 10px #eeeeee;
  }
  &-left {
    margin-right: 5px;
  }
  &-right {
    margin-left: 5px;
  }
}
</style>